<template>
	<div>
		<div class="searchForm" v-bind="$attrs">
			<el-form ref="form" :model="form" :label-width="computedLabelWidth">
				<div
					class="formContent"
					:style="{
						gridTemplateColumns: `repeat(${colsNumber}, minmax(0, 1fr))`,
						gap: gap,
					}"
					:class="[show ? 'showBox' : 'closeBox']"
					ref="formContent">
					<slot></slot>
					<div
						class="handleBox"
						:style="{
							gridColumnStart: `span ${lastBoxFillBlock}`,
						}">
						<div class="handle">
							<div
								@click="changeShow"
								v-if="formItemsNumber > colsNumber">
								<slot name="icon">
									<span class="icon">
										<i
											:class="
												!show
													? 'el-icon-arrow-down'
													: ' el-icon-arrow-up'
											"
											class="shrink"></i>
										{{ show ? '收起' : '展开' }}
									</span>
								</slot>
							</div>
							<el-button
								type=""
								size="mini"
								@click="$emit('reset')">
								重置
							</el-button>
							<el-button
								type="primary"
								size="mini"
								@click="$emit('search')">
								查询
							</el-button>
						</div>
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		components: {},
		props: {
			form: {
				type: Object,
				default: () => {},
			},
			labelWidth: {
				type: String,
				required: false,
			},
			gap: {
				default: () => {
					return '10px 35px';
				},
			},
			colsNumber: {
				type: Number,
				default: 4,
			},
			queryParams: {
				type: Object,
				default: () => {},
			},
		},

		data() {
			return {
				slots_raw: null,
				formItemsNumber: 0,
				show: false,
				ref_form: null,
				ob: null,
				computedLabelWidth: '80px',
			};
		},
		computed: {
			lastBoxFillBlock() {
				let span = 1;
				if (this.show) {
					span =
						this.colsNumber -
						(this.slots_raw?.length % this.colsNumber);
				} else {
					if (this.slots_raw?.length > this.colsNumber) {
						span = 1;
					} else {
						span = this.colsNumber - this.slots_raw?.length;
					}
				}
				return span;
			},
		},
		watch: {},
		created() {},
		mounted() {
			this.$nextTick(() => {
				this.init();
				this.initOb();
			});
			this.refRedirect.call(this, 'form');
		},
		destroyed() {
			this.removeOb();
		},
		methods: {
			initLabelWidth() {
				if (this.labelWidth) {
					this.computedLabelWidth = this.labelWidth;
					return;
				}
				let labelWidth = 80;
				let items = Array.from(
					this.$refs.form?.$el.querySelectorAll(
						'.el-form-item__label',
					),
				);
				items?.map(item => {
					if (item.scrollWidth > labelWidth) {
						labelWidth = item.scrollWidth;
					}
				});

				this.computedLabelWidth = `${labelWidth}px`;
			},
			initOb() {
				if (!this.$refs.formContent) return;
				this.ob = new MutationObserver(this.ob_do);
				this.ob.observe(this.$refs.formContent, {
					childList: true,
				});
			},
			ob_do() {
				this.init();
			},
			removeOb() {
				this.ob && this.ob.disconnect(this.$refs.formContent);
			},
			resize() {
				this.$nextTick(() => {
					this.init();
				});
			},
			init() {
				if (this.$slots?.default?.length == 0) return;
				this.slots_raw = this.$slots?.default?.filter(
					item => item.tag !== undefined,
				);
				this.formItemsNumber = this.slots_raw?.length ?? 0;
				this.formItemsNumber == this.colsNumber
					? (this.show = true)
					: (this.show = false);
			},
			changeShow() {
				this.show = !this.show;
				this.$emit('changeShow', this.show);
				this.$nextTick(() => {
					this.initLabelWidth();
				});
			},
			resetFields() {
				this.$refs.form?.resetFields();
			},
			async validate() {
				return new Promise(resolve => {
					this.$refs.form.validate(valid => {
						resolve(valid);
					});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-form-item {
		width: 100%;
		margin-bottom: 0;
		display: flex;
		.el-form-item__label {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			// line-height: 22px;
			// margin-bottom: 8px;
			padding: 0;
			// width: fit-content !important;
			word-break: break-all;
			white-space: nowrap;
			color: #8c8c8c;
			min-width: 0;
		}
		.el-form-item__content {
			flex: 1;
			min-width: 0;
			margin-left: 10px !important;
			.el-input {
				width: 100%;
			}
			.el-select {
				width: 100%;
			}
			.el-date-editor {
				width: 100%;
			}
		}
	}
	.searchForm {
		border-radius: 4px;
		// margin: 15px;
		padding: 15px 20px;

		background-color: #fff;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}
	.formContent {
		display: grid;
		justify-items: center;
		transition: all 1s;
		grid-auto-flow: row dense;
		// padding: 18px 20px 0;
		.handleBox {
			justify-self: end;

			// margin-bottom: 18px;
			box-sizing: border-box;
			.handle {
				height: 100%;
				display: flex;
				gap: 10px;
				align-items: center;
				::v-deep .el-button + .el-button {
					margin: 0;
				}
			}
		}
	}
	.icon {
		font-size: 14px;
		cursor: pointer;
		// text-overflow: ellipsis;
		// overflow: hidden;
		// word-break: break-all;
		// white-space: nowrap;
		// width: 100%;
	}
	::v-deep .closeBox.formContent {
		.el-form-item:nth-child(n + 4) {
			display: none;
		}
	}
</style>
